<style>

	.block_promotion_grid .content .left {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	.block_promotion_grid .content .left .swiper {
		flex: 1;
	}
	@media screen and (max-width: 767px) {
		.block_promotion_grid .content .left {
			padding-top: 16px !important;
			padding-bottom: 16px !important;
		}
	}
	.block_promotion_grid .content .left .swiper-slide {
		border-radius: var(--button_border_radius);
	}
	.block_promotion_grid .content .left .swiper-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.block_promotion_grid .content .left .swiper-pagination .swiper-pagination-bullet {
		width: 6px;
		height: 6px;
		box-sizing: border-box;
		background-color: var(--point-color);
		opacity: 0.5;
	}
	.block_promotion_grid .content .left .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
		opacity: 1;
	}
	.block_promotion_grid .content .right {
		height: 100%;
		box-sizing: border-box;
		display:flex;
		flex-direction: column;
	}
	@media screen and (max-width: 767px) {
		.block_promotion_grid .content .right {
			padding-top: 16px !important;
			padding-bottom: 16px !important;
		}
	}
	.block_promotion_grid .content .right .right_row {
		display: grid;
		gap: 1.5rem;
		flex: 1 1 0%;
	}
	.block_promotion_grid .content .right .right_row .collection1, .block_promotion_grid .content .right .right_row .collection2 {
		border-radius: var(--button_border_radius);
		overflow: hidden;
	}
	.block_promotion_grid .content .right .right_row .collection1 .img_box, .block_promotion_grid .content .right .right_row .collection2 .img_box {
		position: relative;
		padding-top: 50%;
		width: 100%;
	}
	.block_promotion_grid .content .right .right_row .collection1 .img_box img, .block_promotion_grid .content .right .right_row .collection2 .img_box img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
	}
	.block_promotion_grid .content .right .right_row .collection1 .collection_title, .block_promotion_grid .content .right .right_row .collection2 .collection_title {
		position: absolute;
		width: 100%;
		padding: 37px 12px;
		font-size: calc(var(--general_font_size) * 1.25);
		line-height: 1.25;
		box-sizing: border-box;
		font-weight: 600;
		background: linear-gradient(360deg, rgba(45, 45, 45, 0.5) 0, rgba(45, 45, 45, 0) 100%);
		bottom: 0;
		color: #fff;
	}
	.block_promotion_grid .content{
		display: grid;
			gap: 0.75rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	@media (min-width: 768px) {
		.md\:gap-6 {
			gap: 1.5rem;
		}
	}
	@media screen and (max-width: 767px) {
		.block_promotion_grid .content .right .right_row .collection1 .collection_title, .block_promotion_grid .content .right .right_row .collection2 .collection_title {
			padding: 6px 8px;
			font-size: 12px;
			line-height: 1;
		}
		.card_box {
			padding-top: 15px;
			padding-bottom: 15px;
			border-radius: 8px;
			background-color: #fff;
			overflow: hidden;
		}
		.card_box_wrap {
			padding: 0 8px;
		}
	}
	.overflow-hidden{
		overflow: hidden;
	}
	.relative{
		position: relative;
	}
	.right_row_a{
		display:flex;
		width:100%;
		height:100%;
	}
</style>

{% assign blockId = block_id | default : section.block_id %}
{% assign data = section.settings %}
<div class="block_promotion_grid">
  <div class="container_wrapper">
    <div class="content">
      <div class="left card_box card_box_wrap">
				{%- if data.left_title != "" -%}
					<div class="block_title_custom">
							<h2 >
								<span>{{data.left_title}}</span>
							</h2>
					</div>
				{%- endif -%}
        <div class="swiper relative overflow-hidden" style="width: 100%;" id="swiper-{{blockId}}">
          <ul class="swiper-wrapper">
            {% for block in section.blocks %}
              <li class="swiper-slide overflow-hidden">
                <a href="{{block.link | setUrlDataFrom:data_from}}">
                  {% include 'lazy_img',src: block.image.src,alt: block.image.alt %}
                </a>
              </li>
            {% endfor %}
          </ul>
          <div class="swiper-pagination" id="swiper-pagination-{{blockId}}" style="--point-color: {{data.point_color}};"></div>
        </div>
      </div>
      <div class="right  card_box card_box_wrap">
				{%- if data.right_title != "" -%}
					<div class="block_title_custom">
							<h2 >
								<span>{{data.right_title}}</span>
							</h2>
					</div>
				{%- endif -%}
        <div class="right_row ">
          {% get_collection collections_id={data.collection1.id} collection_image=1 %}
          <div class="collection1">
            {%- capture handle -%}
              {% if collection.handle %}/collections/{{ collection.handle }}
                {% else %}javascript:;{% endif %}
            {%- endcapture -%}
            <a href="{{handle}}" class="right_row_a relative">
              <div class="img_box">
								{%- if collection.image_alt == "" -%}
									{% assign collection_alt = collection | image_alt:'collection'   %}
								{%- else -%}
									{% assign collection_alt = collection.image_alt %}
								{%- endif -%}
                {% include 'lazy_img',src: collection.src,alt: collection_alt %}
              </div>
              <div class="collection_title">{{collection.title | default: "Title"}}</div>
            </a>
          </div>
          {% get_collection collections_id={data.collection2.id} collection_image=1 %}
          <div class="collection2">
            {%- capture handle -%}
              {% if collection.handle %}/collections/{{ collection.handle }}
                {% else %}javascript:;{% endif %}
            {%- endcapture -%}
            <a href="{{handle}}" class="right_row_a relative">
              <div class="img_box">
								{%- if collection.image_alt == "" -%}
									{% assign collection_alt = collection | image_alt:'collection'   %}
								{%- else -%}
									{% assign collection_alt = collection.image_alt %}
								{%- endif -%}
                {% include 'lazy_img',src: collection.src,alt: collection_alt %}
              </div>
              <div class="collection_title">{{collection.title | default: "Title"}}</div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  (function() {

    {%- capture autoplay -%}
      {%- if data.is_play -%}
        {
          delay: Number('{{data.duration}}') * 1000
        }
      {%- else -%}
        false
      {%- endif -%}
    {%- endcapture -%}
    let swiper = new Swiper(`#swiper-{{blockId}}`, {
      effect: 'fade',
      autoplay: {{autoplay}},
      pagination: {
        el: `#swiper-pagination-{{blockId}}`,
        clickable: true
      }
    })
  })()
</script>

{% schema %}
{
	"class": "block_promotion_grid",
	"is_global": false,
	"icon": "icon-duotu3",
	"name": {
		"zh_CN": "推广格子",
		"en_US": "Generalized lattice"
	},
	"max_blocks": 6,
	"blocks": [
		{
			"name": {
				"zh_CN": "轮播图",
				"en_US": "Slideshow"
			},
			"type": "item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "图片",
						"en_US": "Image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "建议宽度1000px以上，高度自适应",
						"en_US": "Recommended width more than 1000px, height adaptive"
					},
					"id": "image"
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接",
						"en_US": "Jump links"
					},
					"default": {
						"type": "",
						"title": "",
						"url": ""
					},
					"id": "link"
				}
			]
		}
	],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "左边设置",
				"en_US": "Left set"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "左边标题",
				"en_US": "Left title"
			},
			"id": "left_title",
			"default": "Sell hot"
		},
		{
			"type": "card_color",
			"id": "point_color",
			"label": {
				"zh_CN": "点",
				"en_US": "Point"
			},
			"default": "#e8565f"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "自动轮播",
				"en_US": "Automatic slide"
			},
			"id": "is_play",
			"default": true
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "轮播时间(s)",
				"en_US": "Slide time (s)"
			},
			"default": "3",
			"max": 5,
			"min": 1,
			"id": "duration"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "右边设置",
				"en_US": "Set on the right"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "右边标题",
				"en_US": "Right title"
			},
			"id": "right_title",
			"default": "Most-loved"
		},
		{
			"type": "card_collection",
			"label": {
				"zh_CN": "促销专辑1",
				"en_US": "Promotional Collection 1"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "collection1"
		},
		{
			"type": "card_collection",
			"label": {
				"zh_CN": "促销专辑2",
				"en_US": "Promotional Collection 2"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "collection2"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "左边轮播图设置",
				"en_US": "Left slide Settings"
			}
		}
	],
	"default": {
		"settings": {
			"left_title": "Sell hot",
			"right_title": "Most-loved",
			"point_color": "#e8565f",
			"is_play": true,
			"duration": 3,
			"collection1": {
				"id": "",
				"title": ""
			},
			"collection2": {
				"id": "",
				"title": ""
			}
		},
		"blocks": [
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"block_type": "item"
			},
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"block_type": "item"
			}
		]
	}
}
{% endschema %}